<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body onload="update()"><!--页面一加载就调用showNum()-->
    <div style="background-color: yellow; height: 50px; width: 300px;line-height: 50px;">
      <form name="myform">
        逗留时间：<input type="text" value="00:00:00" name="mytime"/>
        <br/>
        <input type="button" value="开始" onclick="start()"/>
        <input type="button" value="暂停" onclick="pause()"/>
        <input type="button" value="停止" onclick="stop()"/>
      </form>
    </div>
  </body>

  <script>
      var h = 0;
      var m = 0;
      var s = 0;

      var myin;

      function update() {
          var time = document.myform.mytime.value;
          /*
          console.log(time);
          console.log(typeof(time));*/
          //document.myform.mytime.value=time;

          var arr = time.split(":");
          h = eval(arr[0] + "+0");
          m = eval(arr[1] + "+0");
          s = eval(arr[2] + "+0");
          //console.log(s);

          s++;
          if (s >= 60) {
              m = m + s / 60;
              s = s % 60;
          } else if (m >= 60) {
              h = h + m / 60;
              m = m % 60;
          } else if (h >= 24) {
              h = h % 24;
          }

          document.myform.mytime.value = (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);

      }

      myin = setInterval("update()", 1000);

      function stop() {
          clearInterval(myin);
          document.myform.mytime.value = "00:00:00";
      }

      function pause() {
          if (myin != undefined) {
              clearInterval(myin);
              myin = undefined;
          }

          /*console.log(time);
          console.log(typeof(time));*/
          //document.myform.mytime.value=time;
      }

      function start() {
          if (myin == undefined) {//容错处理************
              myin = setInterval("update()", 1000);
          }

      }

  </script>
</html>
